<template>
  <div class="home">
    <div class="body">
      <div class="category">
        <MKCategory ref="MKCategory" />
      </div>
      <div class="album">
        <MKAlbum ref="MKAlbum" />
      </div>
    </div>
    <div class="player">
      <MKPlayer />
    </div>
  </div>
</template>

<script>
import MKCategory from "@/components/Category.vue";
import MKAlbum from "@/components/Album.vue";
import MKPlayer from "@/components/Player.vue";
export default {
  components: {
    MKCategory,
    MKAlbum,
    MKPlayer
  },
  created() {
    // window.android.setMoiveStatus("1");
  },
  methods: {
    inMKCategory() {
      this.$refs.MKCategory.inCategoryVitems();
    },
    inHeaderVitems() {
      this.$refs.MKHeader.inHeaderVitems();
    }
  }
};
</script>
<style lang="less" scoped>
.home {
  width: 100%;
  height: 100vh;
}
.body {
  width: 100%;
  height: 90vh;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  background: #25272d;
  //background-color: #444851;
  //background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000000' fill-opacity='0.51' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
}
.category {
  width: 18%;
  height: 100%;
}
.album {
  width: 80%;
  height: 100%;
}
.player {
  width: 100%;
  height: 10vh;
}
</style>
